<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="progress-bar" width="100" height="100"></canvas>
</body>
<script>
  const canvas = document.querySelector("#progress-bar")
  const ctx = canvas.getContext("2d")

  function drawProgress (progress) {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置进度条属性
    const lineWidth = 10 // 进度条宽度
    const radius = canvas.width / 2 - lineWidth / 2 // 进度条半径
    const startAngle = -Math.PI / 2 // 起始角度
    const endAngle = startAngle + (Math.PI * 2 * progress) / 100 // 终止角度

    // 定义渐变
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    gradient.addColorStop(0, "#9b65ff") // 渐变起始颜色
    gradient.addColorStop(1, "#ff45f4") // 渐变终止颜色

    // 绘制背景圆环
    ctx.beginPath()
    ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2)
    ctx.strokeStyle = "#ddd"
    ctx.lineWidth = lineWidth
    ctx.stroke()

    // 绘制进度条圆环
    ctx.beginPath()
    ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle)
    ctx.strokeStyle = gradient
    ctx.lineCap = "round"
    ctx.lineWidth = lineWidth
    ctx.stroke()

    // 绘制进度条百分比文字
    const text = `${progress}%` // 百分比字符串
    ctx.fillStyle = gradient // 设置渐变颜色
    ctx.font = "20px Arial"
    const textWidth = ctx.measureText(text).width // 文字宽度
    ctx.fillText(text, (canvas.width - textWidth) / 2, canvas.height / 2 + 7)
  }

  // progress为进度值，可以动态改变
  const progress = 70
  drawProgress(progress);
</script>

</html>